<template>
  <scroll-view scroll-y class="page" @scroll="handleScroll">
		<!-- :style="{height: statusHeight + 'px', opacity: (scrollTop/100)>=1?1:(scrollTop/100)}" -->
		<view class="fixed">
			<cu-custom :bgColor="personalTitleBg">
				<block slot="right">			
					<text class="cuIcon-settingsfill margin-left" style="font-size: 40rpx;" @tap="showModal" data-target="DrawerModalL"></text>
				</block>
				<block slot="content">个人中心</block>
			</cu-custom>
		</view>
  	<image src="/static/imgs/personal_bg.jpg" mode="widthFix" class="response"></image>
  	<view class="page_avatar padding">
  		<view class="page_userinfo">
				<!-- https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2884884651,1173945476&fm=26&gp=0.jpg -->
  			<!-- <image class="cu-avatar radius xl shadow bg-white" :src="userInfo.avatarUrl"></image> -->
				<open-data type="userAvatarUrl" class="radius xl shadow" style="width: 130rpx;height: 130rpx;"></open-data>
  			<view class="page_account">
  				<!-- <text class="page_account_top"></text> -->
					<open-data type="userNickName" class="page_account_top"></open-data>
  				<text class="page_account_bottom">{{ userInfo.openid?'已登录':'未授权登录' }}</text>
  			</view>
  		</view>
  	</view>
  	<view class="page_content margin">
  			<view class="cu-list grid radius shadow" :class="['col-3','no-border']">
  				<view class="cu-item" @click="togoMusicHistory()">
  					<view :class="['cuIcon-formfill','text-orange']">
  						<!-- <view class="cu-tag badge bg-orange">
  							<block>99+</block>
  						</view> -->
  					</view>
  					<text style="color: #f37b1d;">其他记录</text>
  				</view>
  				<view class="cu-item text-pink" @click="togoDownload()">
  					<view :class="['cuIcon-likefill','text-red']">
  						<!-- <view class="cu-tag badge bg-red">
  							<block>0</block>
  						</view> -->
  					</view>
  					<text style="color: red;">我的下载</text>
  				</view>
  				<view class="cu-item" @click="togoYourZone()">
  					<view :class="['cuIcon-commandfill','text-gray']">
  						<view class="cu-tag badge bg-gray">
  							<block>x</block>
  						</view>
  					</view>
  					<text>秘密空间</text>
  				</view>
  			</view>
  	</view>
  	<view v-if="userInfo.openid" class="cu-list menu shadow bg-white" :class="['sm-border','card-menu margin-top']">
  		<view class="cu-item">
  			<button class="cu-btn content" @tap="scanOpen">
  				<text class="cuIcon-scan text-olive"></text>
  				<text class="text-grey">扫一扫</text>
  			</button>
  		</view>
  		<!-- <view class="cu-item">
  			<view class="content">
  				<text class="cuIcon-explorefill text-pink"></text>
  				<text class="text-grey">我的好友</text>
  			</view>
  			<view class="action">
  				<view class="cu-avatar-group"> -->
  					<!-- <view class="cu-avatar round sm" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg);"></view>
  					<view class="cu-avatar round sm" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big81005.jpg);"></view> -->
  				<!-- </view>
  				<text class="text-grey text-sm">0 人</text>
  			</view>
  		</view> -->
			<view class="cu-item" @tap="showModal" data-target="ChooseModal">
				<view class="content">
					<text class="cuIcon-tagfill text-red margin-right-xs"></text>
					<text class="text-grey">个人状态</text>
				</view>
				<view class="action">
					<view :class="['cu-tag round light', 'bg-'+s.color]" v-for="(s,i) in stateList" :key="i">{{ s.name }}</view>
				</view>
			</view>
			<view class="cu-modal bottom-modal" :class="modalName=='ChooseModal'?'show':''" @tap="hideModal">
				<view class="cu-dialog" @tap.stop="">
					<view class="cu-bar bg-white">
						<view class="action text-blue" @tap="hideModal">取消</view>
						<view class="action text-green" @tap="setState">设置</view>
					</view>
					<view class="grid col-3 padding-sm">
						<view v-for="(item,index) in stateBox" class="padding-xs" :key="index">
							<button class="cu-btn orange lg block" :class="item.checked?'bg-'+item.color:'line-'+item.color" @tap="chooseState"
							 :data-value="item.value"> {{item.name}}
								<view class="cu-tag sm round" :class="item.checked?'bg-white text-orange':'bg-red'" v-if="item.hot">HOT</view>
							</button>
						</view>
					</view>
				</view>
			</view>
			<view class="cu-item">
				<view class="content" @click="toShareList">
					<text class="cuIcon-list text-blue"></text>
					<text class="text-grey">资源列表</text>
				</view>
			</view>
			<view class="cu-item">
				<view class="content" @click="showQrcode">
					<text class="cuIcon-appreciatefill text-red"></text>
					<text class="text-grey">小程序码</text>
				</view>
			</view>
			<view class="cu-item">
				<view class="content" @click="showSelfMap">
					<text class="cuIcon-locationfill text-purple"></text>
					<text class="text-grey">我的位置</text>
				</view>
			</view>
			<view class="cu-item">
			  <button class="cu-btn content" open-type="feedback">
			    <text class="cuIcon-writefill text-cyan"></text>
			    <text class="text-grey">意见反馈</text>
			  </button>
			</view>
			<view class="cu-item">
				<button class="cu-btn content" open-type="contact">
					<text class="cuIcon-servicefill text-blue"></text>
					<text class="text-grey">联系客服</text>
				</button>
			</view>
			<view class="cu-item">
				<view class="content" @click="toAppTheme">
					<text class="cuIcon-clothesfill text-brown"></text>
					<text class="text-grey">主题设置</text>
				</view>
			</view>
  		<!-- <view class="cu-item">
  			<view class="content">
  				<text class="text-grey">😊 周一</text>
  			</view>
  			<view class="action">
  				<text class="text-grey text-sm">摸鱼</text>
  			</view>
  		</view>
			<view class="cu-item">
				<view class="content">
					<text class="text-grey">😒 周五</text>
				</view>
				<view class="action">
					<text class="text-grey text-sm">敲代码</text>
				</view>
			</view> -->
			<view class="cu-item">
				<view class="content">
					<text class="cuIcon-paintfill text-red"></text>
					<text class="text-grey">清理缓存</text>
				</view>
				<view class="action">
					<button class="cu-btn round bg-red shadow" @tap="showModal" data-target="bottomModal">
						<text class="cuIcon-paint"></text> 清理</button>
				</view>
			</view>
			<view class="cu-item">
				<view class="content padding-tb-sm">
					<view>
						<text class="cuIcon-questionfill text-green margin-right-xs"></text> 自动登录
					</view>
					<view class="text-gray text-sm">
						<text class="cuIcon-infofill margin-right-xs"></text> 进入首页是否自动授权登录</view>
					</view>
				<view class="action">
					<!-- <switch class="switch-green" :class="userInfo.gender==1?'checked':''" :checked="userInfo.gender==1?true:false"></switch> -->
					<switch class="switch-green" :class="autoLogin?'checked':''" :checked="autoLogin" @change="changeAutoLogin"></switch>
				</view>
			</view>
  	</view>
  	<view class="margin-top padding-lr-xl flex flex-direction">
  		<button v-if="userInfo.openid" class="cu-btn bg-red margin-tb-sm lg shadow" @tap="showModal" data-target="logout">退 出 登 录</button>
  		<button v-else class="cu-btn line-blue margin-tb-sm lg shadow" @tap="showModal" data-target="login">登 录 账 号</button>
  	</view>
  	<view class="cu-modal drawer-modal justify-start" :class="modalName=='DrawerModalL'?'show':''" @tap="hideModal">
  		<view class="cu-dialog basis-lg" @tap.stop="" :style="[{top:CustomBar+'px',height:'calc(100vh - ' + CustomBar + 'px)'}]">
  			<view class="cu-list menu text-left sm-border">
  				<view class="cu-bar bg-white">
  					<view class="action sub-title">
							<text class="text-xl text-bold text-blue">个人设置</text>
							<text class="bg-blue"></text>
  					</view>
  				</view>
					<view class="cu-item arrow margin-top">
						<navigator class="content" hover-class="none" url="" @tap="toUpdateInfo">
							<text class="cuIcon-profilefill text-cyan"></text>
							<text class="text-grey">编辑信息</text>
						</navigator>
					</view>
  				<view class="cu-item arrow">
  					<navigator class="content" hover-class="none" url="" @tap="toUpdatePwd">
  						<text class="cuIcon-commandfill text-orange"></text>
  						<text class="text-grey">修改密码</text>
  					</navigator>
  				</view>
  				<view class="cu-item arrow">
  					<navigator class="content" hover-class="none" url="../../pagesME/personal/aboutUs" navigateTo>
  						<text class="cuIcon-infofill text-grey"></text>
  						<text class="text-grey">关羽我们</text>
  					</navigator>
  				</view>
  			</view>
  		</view>
  	</view>
  	<view class="cu-modal" :class="modalName=='logout'?'show':''">
  		<view class="cu-dialog">
  			<view class="cu-bar bg-white padding justify-start">
  				<b>退出</b>
  			</view>
  			<view class="padding bg-white">
  				确定退出么？
  			</view>
  			<view class="cu-bar bg-white justify-end">
  				<view class="action">
  					<button class="cu-btn line-red" @tap="hideModal">取消</button>
  					<button class="cu-btn bg-red margin-left" @tap="loginOut">确定</button>
  				</view>
  			</view>
  		</view>
  	</view>
		<view class="cu-modal" :class="modalName=='login'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white padding justify-start">
					<b>提示</b>
				</view>
				<view class="padding bg-white">
					确定前往登录页面吗？
				</view>
				<view class="cu-bar bg-white justify-end">
					<view class="action">
						<button class="cu-btn line-blue" @tap="hideModal">取消</button>
						<button class="cu-btn bg-blue margin-left" @tap="loginOut">确定</button>
					</view>
				</view>
			</view>
		</view>
  	<view class="cu-load load-modal" v-if="loadModal">
			<view class="cu-load load-cuIcon" :class="'loading'"></view>
  		<!-- <view class="cuIcon-loading loading text-gray"></view> -->
  		<!-- <image src="/static/logo.png" mode="aspectFit"></image> -->
  		<view class="gray-text">执行中...</view>
  	</view>
		<view class="cu-modal bottom-modal" :class="modalName=='bottomModal'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white">
					<view class="action text-red" @tap="clearStorage">确定</view>
					<view class="action text-green" @tap="hideModal">取消</view>
				</view>
				<view class="padding-xl">
					要清除所有缓存记录（用户信息，听歌记录）么？
				</view>
			</view>
		</view>
  </scroll-view>
</template>
<script>
export default {
  data() {
    return {
			statusHeight: this.StatusBar,
			personalTitleBg: 'bg-shadeTop',
			// personalTitleBg: 'bg-black',
			modalName: undefined,
			loadModal: false,
			autoLogin: false,
			userInfo: {},
			scrollTop: 0,
			bottom: 0,
			height: 0,
			top: 0,
			stateList: [
				{
					name: '点击设置',
					color: 'grey'
				}
			],
			stateBox: [{
				value: 0,
				name: '学习中',
				color: 'green',
				checked: false,
				hot: false,
			}, {
				value: 1,
				name: '工作中',
				color: 'orange',
				checked: false,
				hot: false,
			}, {
				value: 2,
				name: '出去玩',
				color: 'cyan',
				checked: false,
				hot: true,
			}, {
				value: 3,
				name: '睡觉',
				color: 'gray',
				checked: false,
				hot: true,
			}, {
				value: 4,
				name: '吃饭',
				color: 'purple',
				checked: false,
				hot: false,
			}, {
				value: 5,
				name: '未知',
				color: 'blue',
				checked: false,
				hot: false,
			}]
    };
  },
  onLoad() {
		this.userInfo = uni.getStorageSync('userInfo')
		this.autoLogin = uni.getStorageSync('autoLogin') || false
	},
	onShow() {},
  methods: {
		// 沉浸式变色
		handleScroll(e) {
			if (e.detail.scrollTop > this.statusHeight + 50) {
				this.personalTitleBg = 'bg-black'
			} else {
				this.personalTitleBg = 'bg-shadeTop'
			}
			// this.scrollTop = e.detail.scrollTop
		},
		showSelfMap() {
			this.jump('/pagesME/settings/selfmap')
		},
		toAppTheme() {
			this.jump('/pagesME/settings/theme')
		},
		toShareList() {
			let url = 'https://mp.weixin.qq.com/s?__biz=Mzg5NjYwNzgxMA==&mid=2247483858&idx=1&sn=764c5391770c6dcbea466b9e22fa8777&chksm=c07f32fff708bbe97797511c91d6e37ff1ecf8d8f0662aa12fbb9bf9b6f329cd40e5e293ddef&token=1824976680&lang=zh_CN#rd'
			let title = '游戏资源列表'
			this.togo('/pagesME/settings/settingWebview', {url: url, title: title})
		},
		showQrcode() {
			wx.previewImage({
				urls: ['https://gitee.com/baby783/angel6_img_bed/raw/master/uni_em/background/uni_em_code.jpg'],
				current: 'https://gitee.com/baby783/angel6_img_bed/raw/master/uni_em/background/uni_em_code.jpg'    
			})
		},
		clearStorage() {
			this.hideModal()
			uni.showLoading({
				title: '清理中...',
				mask: true
			})
			setTimeout(()=>{
				uni.showToast({
					icon: 'success',
					title: '清理成功'
				})
				uni.hideLoading()
			},2000)
		},
		scanOpen() {
			uni.scanCode({
				scanType: ['barCode'],
				success: function (res) {
					console.log('条码类型：' + res.scanType);
					console.log('条码内容：' + res.result);
				}
			});
		},
		toChild(e) {
			uni.navigateTo({
				url: e.currentTarget.dataset.url
			})
		},
		showModal(e) {
			this.modalName = e.currentTarget.dataset.target
		},
		hideModal(e) {
			this.modalName = null
		},
		loginOut(){
			this.loadModal = true
			this.hideModal()
			setTimeout(() => {
				this.loadModal = false
				uni.removeStorageSync('userInfo')
				uni.reLaunch({
					url: '/pages/login'
				})
			}, 1000)
		},
		// 跳转三大页面
		togoDownload() {
			this.jump('/pagesME/top/download')
		},
		togoMusicHistory() {
			this.jump('/pagesME/top/history')
		},
		togoYourZone() {
			// this.jump('/pagesME/top/yourzone')
			uni.showToast({
				icon: 'none',
				title: '你暂时还没有什么秘密哦🤭'
			})
		},
		// 判断登录
		checkLogin() {
			if (!this.userInfo.openid) {
				uni.showToast({
					icon: 'none',
					title: '请先进行授权登录吧'
				})
				return
			}
		},
		// 跳转设置页面
		toUpdateInfo() {
			this.checkLogin()
			this.jump('../../pagesME/personal/updateInfo')
		},
		toUpdatePwd() {
			this.checkLogin()
			this.jump('../../pagesME/personal/updatePwd')
		},
		changeAutoLogin(e) {
			let res = e.detail.value
			this.autoLogin = res
			uni.setStorageSync('autoLogin', res)
		},
		// 设置个人状态
		chooseState(e) {
			let items = this.stateBox
			let values = e.currentTarget.dataset.value
			for (let i = 0, lenI = items.length; i < lenI; ++i) {
				if (items[i].value == values) {
					items[i].checked = !items[i].checked;
					break
				}
			}
		},
		setState() {
			let self = this
			let count = 0
			let items = this.stateBox
			let states = []
			for (let i = 0, lenI = items.length; i < lenI; ++i) {
				if (items[i].checked) {
					if (!states.includes({name: items[i].name, color: items[i].color})) {
						states.push({name: items[i].name, color: items[i].color})
						count ++;
					}
				}
			}
			if (count > 3) {
				uni.showToast({
					icon: 'none',
					title: '最多只能设置3个哦'
				})
				return
			}
			this.stateList = states
			this.modalName = null
		}
	},
};
</script>

<style scoped lang="scss">
	.page {
		height: 100vh;
		overflow: hidden;
		.fixed {
			position: fixed;
			z-index: 99;
		}
		.page_avatar {
			display: flex;
			position: relative;
			margin-top: -22vh;
			margin-left: 3vh;
	
			.page_userinfo {
				width: 80%;
				display: flex;
				flex-direction: row;
				image {
					flex: 1;
				}
				.page_account {
					flex: 3;
					margin-left: 30rpx;
					
					.page_account_top {
						font-size: 35rpx;
						font-weight: bold;
						color: transparent;
						-webkit-text-fill-color: #FFFFFF;/*文字的填充色*/
						-webkit-text-stroke: 2rpx #303133;
					}
					.page_account_bottom {
						color: #303133;
						display: flex;
						margin-top: 15rpx;
						font-size: 30rpx;
						font-weight: bold;
					}
				}
			}

		}
		.page_content {
			position: relative;
			.radius {
				border-radius: 2vh;
			}
			.shadow{
				box-shadow: 3px 3px 4px rgba($color: #000000, $alpha: .3)
			}
		}
		.menu {
			position: relative;
		}
	}
</style>
